<template>
    <div>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>数据表格</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                    @change="tableSelectChange">
                    <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>位置</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.nameid" filterable clearable placeholder="请选择地理位置列" size="mini">
                    <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>位置类型</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.maptype" filterable clearable placeholder="请选择地理位置列" size="mini">
                    <el-option :value="0" label="国家"></el-option>
                    <el-option :value="1" label="省份"></el-option>
                    <el-option :value="2" label="城市"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>信息字段</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.valueid" filterable clearable placeholder="请选择数据列" size="mini">
                    <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle" v-for="(item, index) in obj.tableData.itemid"
            :key="'itemid' + index">
            <el-col :span="8" class="editlabel">
                <span>信息字段</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.itemid[index]" clearable placeholder="请选择数据" size="mini"
                    style="width:190px;">
                    <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <i class="el-icon-error" @click="deleteSelectItem(obj.tableData.itemid, index)"></i>
            </el-col>
        </el-row>
        <div class="addybtn" @click="addSelectItem(obj.tableData.itemid)" style="margin-right:0px;">
            + 添加信息
        </div>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>数据范围</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model.number="obj.tableData.min" style="width:150px;margin-right:10px;" type="number"
                    placeholder="最小值" />
                <input v-model.number="obj.tableData.max" style="width:150px;" type="number" placeholder="最大值" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>颜色范围</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-color-picker v-model="obj.tableData.color1" size="small" show-alpha :predefine="predefineColors"
                    popper-class="mycolorview" @active-change="setColorChange(obj.tableData, 'color1', $event)" />
                <span style="margin-left:10px;"></span>
                <el-color-picker v-model="obj.tableData.color2" size="small" show-alpha :predefine="predefineColors"
                    popper-class="mycolorview" @active-change="setColorChange(obj.tableData, 'color2', $event)" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>地图样式</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <span class="style1">边框</span>
                <el-color-picker v-model="obj.tableData.borderColor" size="small" show-alpha
                    :predefine="predefineColors" popper-class="mycolorview"
                    @active-change="setColorChange(obj.tableData, 'borderColor', $event)" />
                <span class="style1">背景</span>
                <el-color-picker v-model="obj.tableData.backgroundColor" size="small" show-alpha
                    :predefine="predefineColors" popper-class="mycolorview"
                    @active-change="setColorChange(obj.tableData, 'backgroundColor', $event)" />
                <span class="style1">高亮</span>
                <el-color-picker v-model="obj.tableData.hoverColor" size="small" show-alpha :predefine="predefineColors"
                    popper-class="mycolorview" @active-change="setColorChange(obj.tableData, 'hoverColor', $event)" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>显示名称</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-checkbox v-model="obj.tableData.isShowName"></el-checkbox>
                <template v-if="obj.tableData.isShowName">
                    <input v-model.number="obj.tableData.textfontSize" class="miniinput" type="number"
                        style="width:82px;margin-left:16px;" />
                    <el-color-picker v-model="obj.tableData.textColor" size="small" show-alpha
                        :predefine="predefineColors" popper-class="mycolorview"
                        @active-change="setColorChange(obj.tableData, 'textColor', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.tableData.textFontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj.tableData, 'textFontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.tableData.textFontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj.tableData, 'textFontStyle')"><i
                                class="iconfont icon-zitixieti"></i></div>
                    </div>
                </template>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>显示引导线</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-checkbox v-model="obj.tableData.isShowLine"></el-checkbox>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "EchartMapForm",
    props: {
        predefineColors: Array,
        obj: Object,
        dataTableList: Array,
        setFontStyle: Function,
        setColorChange: Function,
        columnData: Array,
        tableSelectChange: Function,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        addSelectItem(item, val) {
            item.push(val);
        },
        deleteSelectItem(item, index) {
            item.splice(index, 1);
        }
    }
}
</script>

<style scoped>
.style1 {
    font-size: 13px;
    margin: 0 5px;
}
</style>
